<template>
  <view class="pages">
    <h-nav-bar fixed title="添加产检项目">
      <template #right>
        <u-button
          type="primary"
          @click="saveEualuation"
          shape="circle"
          text="完成"
          class="custom-style"
        ></u-button>
      </template>
    </h-nav-bar>
    <view class="index_list">
      <up-checkbox-group v-model="proArr" iconPlacement="right">
        <u-index-list @select="indexChange">
          <template v-for="(item, index) in itemArr" :key="index">
            <!-- #ifdef APP-NVUE -->
            <u-index-anchor :text="indexList[index]"></u-index-anchor>
            <!-- #endif -->
            <u-index-item>
              <!-- #ifndef APP-NVUE -->
              <u-index-anchor
                bgColor="#F6F6F6"
                :text="indexList[index]"
                color="#999999"
              ></u-index-anchor>
              <!-- #endif -->
              <view class="list_cell" v-for="(cell, index) in item" :key="index">
                <view class="list_box">
                  <view class="redio_box">
                    <!-- <u-checkbox-group @change="checkedChange(cell.id)">
                          <u-checkbox shape="circle" activeColor="#A28AFF"></u-checkbox>
                        </u-checkbox-group> -->
                    <!-- <up-radio @change="checkedChange(cell.id, cell.name)" activeColor="#A28AFF"
                            :name="cell.name"></up-radio> -->
                    <up-checkbox activeColor="#A28AFF" :name="cell.id" shape="circle">
                    </up-checkbox>
                  </view>
                  <view class="index_text">{{ cell.name }}</view>
                </view>
              </view>
            </u-index-item>
          </template>
        </u-index-list>
      </up-checkbox-group>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad, onPageScroll, onShow } from '@dcloudio/uni-app'
import { navigateBack, navigateTo, showToast } from '@/utils'
import { getProjectInfo } from '@/api/pregnancy/index'
//索引列表
const indexList = ref([])

const itemArr = ref([])
//参数
const paramsArr = ref([])

const proArr = ref([])
onLoad((options) => {
  if (options.ids) {
    proArr.value = options.ids.split(',').map((v) => Number(v))
    console.log(proArr.value)
  }
  // console.log(options,'sdsds')
})
onShow(() => {
  getIndexList()
})
const productList = ref([])
//获取索引列表
async function getIndexList() {
  const res = await getProjectInfo()
  if (res.code == 200) {
    indexList.value = res.data.data[0]
    itemArr.value = res.data.data[1]
    productList.value = res.data.data[1].flat()
  }
}

function indexChange(e) {
  console.log(e)
}
const itemNameArr = ref([])
// function checkedChange(n, name) {
//   paramsArr.value.push(n)
//   itemNameArr.value.push(name)
// }
//完成
function saveEualuation() {
  if (proArr.value.length == 0) {
    showToast('请添加产检项目')
  } else {
    let arr = productList.value
      .filter((v) => {
        return proArr.value.includes(v.id)
      })
      .map((j) => {
        return j.name
      })
    uni.$emit('getProductList', { paramsArr: proArr.value, itemNameArr: arr })
    // uni.setStorageSync('paramsArr', paramsArr.value)
    // uni.setStorageSync('itemNameArr', itemNameArr.value)

    navigateBack()
  }
}
</script>

<style lang="scss" scoped>
.pages {
  width: 750rpx;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f6f6f6;
  font-family: PingFang-SC-Bold, PingFang-SC;
  padding-bottom: 30rpx;

  .index_list {
    width: 750rpx;

    .list_cell {
      width: 750rpx;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;

      .list_box {
        width: 702rpx;
        display: flex;
        align-items: center;
        height: 88rpx;
        border-bottom: 1rpx solid #e6e6e6;

        .index_text {
          font-size: 26rpx;
          color: #333333;
          margin-left: 10rpx;
        }
      }
    }
  }
}

//nav
.custom-style {
  width: 102rpx;
  height: 46rpx;
  background: #a28aff;
  border-radius: 69rpx 69rpx 69rpx 69rpx;
}
</style>
